import React from 'react';
import {Checkbox, Radio} from 'antd';
import {WeaSearchGroup, WeaFormItem, WeaInput,WeaLocaleProvider, WeaSelect, WeaCheckbox } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EType from './base/EType';
import ETitle from './base/ETitle';
import Content_video_detailedSetting from  './Content_video_detailedSetting'

// 视频元素
export default class Content_video extends React.Component {
    state = {
        eVideoShow: this.props.eVideoShow,
        eVideoForm: this.props.eVideoForm,
        eShowType: this.props.eVideoShowType || '1',
        eAutoHeight: this.props.eAutoHeight || false,
        eShowMulitline: this.props.showMulitline || false,
        eShowNums: this.props.showNums || 1,
        eDetailedSettingible: false,
        showTitle: this.props.showTitle || '0',
        fontSize: this.props.fontSize || '16',
        datas: this.props.datas,
    };

    render() {
        const {eVideoShow, eVideoForm, eShowType, eAutoHeight, eDetailedSettingible, datas,
            showTitle, fontSize, eShowMulitline, eShowNums } = this.state;
        let VideoDetailedSetting = <div></div>
        let eDSProps = {};
        if (eDetailedSettingible) {
            const videoDatas = datas.map((item, index) => {
                item.key = index;
                return item;
            })
            eDSProps = {
                datas: videoDatas,
                showTitle: showTitle,
                fontSize: fontSize,
                onOk: (datas,showTitle,fontSize) => {
                    this.setState({
                        datas: datas,
                        showTitle: showTitle,
                        fontSize: fontSize,
                        eDetailedSettingible: false
                    });
                },
                onCancel: () => {
                    this.setState({
                        eDetailedSettingible: false
                    });
                }
            };
            VideoDetailedSetting = (<Content_video_detailedSetting ecId={`${this && this.props && this.props.ecId || ''}_Content_video_detailedSetting@cxrxj6`} {...eDSProps}/>);
        }

        const options = [{
            key: "1",
            selected: true,
            showname: "单个显示"
        },{
            key: "2",
            selected: false,
            showname: "多个显示"
        }];
        let EShowSetting = <div></div>;
        let EVideoFrom = <div></div>;
        let EShowType =<div></div>
        let EShowFullScreen =<div></div>
        let EAutoPlay =<div></div>
		let EIsMuted =<div></div>
        if (this.props.eShareLevel == '2') {
            EShowSetting = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@gopdg0`} label={"视频高度"} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    {
                        !eAutoHeight &&  <div style={{display: 'inline-block'}}>
                            <span>{getLabel(386530, '高度：')}</span>
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@bo674f`} value={eVideoShow.height} style={{width: '50px'}} onChange={value => this.setState({eVideoShow: {...eVideoShow, height: value}})}/>
                            <span style={{display: 'inline-block', marginBottom: '6px', marginLeft: '9px'}}>px</span>
                        </div>
                    }
                    <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@sslg9e`} checked={eAutoHeight} style={{marginLeft: !eAutoHeight ? '10px': 0}} onChange={e => this.setState({eAutoHeight: e.target.checked})}>{'自适应高度'}</Checkbox>
                </WeaFormItem>
            );

            EShowType= (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@n4pdv8`} label={"显示方式"} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@r7up1n`}
                        style={{width: '200px'}}
                        options={options}
                        detailtype={3}
                        value={eShowType}
                        onChange={value => {
                            if(value == '1'){
                                this.setState({
                                    eShowType: value,
                                    eShowMulitline: false,
                                    eShowNums: 1
                                })
                            }else {
                                this.setState({eShowType: value})
                            }
                        }}
                    />
                    {
                        eShowType == '2' && <div style={{display: 'inline-block'}}>
                            <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@20kpp6`} checked={eShowMulitline} style={{marginLeft: !eAutoHeight ? '10px': 0, display: 'inline-block'}} onChange={e => this.setState({eShowMulitline: e.target.checked})}>{'多行显示'}</Checkbox>
                            <span style={{display: 'inline-block'}}>{'每行显示个数'}</span>
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@la5hne`} value={eShowNums} onChange={value => this.setState({eShowNums: value})} style={{display: 'inline-block', width: '100px', position: 'absolute', top: '-3px'}}/>
                        </div>
                    }

                </WeaFormItem>
            )

            EShowFullScreen = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@u78u0m`} label={"允许全屏显示"} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@wervw0`} display="switch" value={eVideoShow.showFullScreen} onChange={v => {
                        this.setState({eVideoShow: {...eVideoShow, showFullScreen: v==1}})
                    }}/>
                </WeaFormItem>
            );

            EAutoPlay = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4dpm4d`} label={getLabel(22840, '自动播放')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@8qqigf`} display="switch" value={eVideoShow.autoPlay} onChange={v => {
                        this.setState({eVideoShow: {...eVideoShow, autoPlay: v==1}})
                    }}/>
                </WeaFormItem>
            );
			EIsMuted = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@k6cetv`} label={getLabel(522154, '静音播放')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@qzp2u7`} display="switch" value={eVideoShow.isMuted} onChange={v => {
                        this.setState({eVideoShow: {...eVideoShow, isMuted: v==1}})
                    }}/>
                </WeaFormItem>
            );
            EVideoFrom = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@99ih3b`} label={getLabel(22841, '视频来源')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    {VideoDetailedSetting}
                    <div  style={{marginTop:7}} onClick={() => this.setState({eDetailedSettingible: true})}><a href="javascript:void(0);">{'设置'}</a></div>
                </WeaFormItem>
            );
        }
        return (
            <div>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@5tjj2c`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                    <EType ecId={`${this && this.props && this.props.ecId || ''}_EType@w5a9mw`} ref="eType" value={this.props.eBaseName}/>
                    {this.props.eShareLevel == '2' ? <ETitle ecId={`${this && this.props && this.props.ecId || ''}_ETitle@6j9m6m`} ref="eTitle" eid={this.props.eid} value={this.props.eTitle} {...this.props}/> : ''}
                    {EShowSetting}
                    {EShowType}
                    {EShowFullScreen}
                    {eShowType == '1' && EAutoPlay}
					{EIsMuted}
                    {EVideoFrom}
                </WeaSearchGroup>
            </div>
        );
    }

    getSaveValues() {
        return {
            eContentTitle: this.refs['eTitle'] ? this.refs['eTitle'].getSaveValues() : this.props.eTitle,
            eContentVideoShow_height: this.state.eVideoShow.height,
            eContentShowType: this.state.eShowType,
            eContentAutoHeight: this.state.eAutoHeight,
            eContentShowMulitline:this.state.eShowMulitline,
            eContentShowNums:this.state.eShowNums,
            eContentVideoShow_showFullScreen: this.state.eVideoShow.showFullScreen,
            eContentVideoShow_autoPlay: this.state.eVideoShow.autoPlay,
			eContentVideoShow_isMuted: this.state.eVideoShow.isMuted,
            eContentDatas: this.state.datas,
            eContentShowTitle: this.state.showTitle,
            eContentFontSize: this.state.fontSize,

        };
    }
}